{% extends "后台管理/template.html" %}

{% block title %}登录{% endblock %}

{% block css %}
<style>
.auth-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    width: 100%;
}

.auth-wrapper .auth-inner {
    width: 100%;
}

.auth-wrapper.auth-basic {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth-wrapper .auth-bg {
    background-color: #fff;
}

.auth-login-basic .auth-inner {
    max-width: 450px;
    position: relative;
}

.card {
    border: 0 solid #d9dee3;
    box-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
}

.app-brand {
    height: 64px;
    margin-bottom: 1.5rem;
}

.app-brand-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #696cff;
    text-decoration: none;
}

.app-brand-logo {
    width: 28px;
}

.input-group-merge {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-merge .form-control:not(:last-child) {
    border-right: 0;
    padding-right: 0;
}

.input-group-merge .input-group-text {
    border-left: 0;
    background: transparent;
}

.form-password-toggle .input-group-text {
    cursor: pointer;
}
</style>
{% endblock %}

{% block content %}
<div class="container-xxl">
    <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner">
            <!-- 登录卡片 -->
            <div class="card">
                <div class="card-body">
                    <!-- Logo -->
                    <div class="app-brand justify-content-center">
                        <a href="javascript:void(0);" class="app-brand-link gap-2">
                            <span class="app-brand-logo">
                                <!-- <img src="/static/images/" alt="Logo"> -->
                            </span>
                            <span class="app-brand-text demo text-body fw-bold">激励中心</span>
                        </a>
                    </div>
                    <!-- /Logo -->
                    <h4 class="mb-2 text-center">欢迎来到激励中心! 👋</h4>
                    <p class="mb-4 text-center">请登录您的账号</p>

                    <form id="loginForm" class="mb-3" method="post" action="/web/ht/login/">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="username" 
                                   name="username" 
                                   placeholder="请输入用户名" 
                                   autofocus>
                        </div>
                        <div class="mb-3 form-password-toggle">
                            <div class="d-flex justify-content-between">
                                <label class="form-label" for="password">密码</label>
                                <!-- <a href="javascript:void(0);">
                                    <small>忘记密码?</small>
                                </a> -->
                            </div>
                            <div class="input-group input-group-merge">
                                <input type="password" 
                                       class="form-control" 
                                       id="password" 
                                       name="password" 
                                       placeholder="············">
                                <span class="input-group-text cursor-pointer">
                                    <i class="bx bx-hide"></i>
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="remember-me">
                                <label class="form-check-label" for="remember-me">记住我</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-primary d-grid w-100" type="submit">登录</button>
                        </div>
                    </form>

                    <p class="text-center">
                        <span>中控台属于产品的后台管理，不对外开放以免泄露产品信息</span>
                        <span>如果您是产品经理，请使用产品经理账号登录</span>
                        <!-- <a href="javascript:void(0);">
                            <span>创建账号</span>
                        </a> -->
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block nav_left %}
{% include '后台管理/components/左侧导航栏.html' %}
{% endblock %}

{% block js %}
<script>
// 密码显示切换
document.querySelector('.form-password-toggle .input-group-text').addEventListener('click', function() {
    const input = this.previousElementSibling;
    const icon = this.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bx-hide');
        icon.classList.add('bx-show');
    } else {
        input.type = 'password';
        icon.classList.remove('bx-show');
        icon.classList.add('bx-hide');
    }
});

// 登录
// document.querySelector('#loginForm').addEventListener('submit', function(event) {
//     event.preventDefault();
//     const formData = new FormData(this);
//     const data = Object.fromEntries(formData.entries());
//     // data.csrfmiddlewaretoken = '{{ csrf_token }}';
//     // 在请求头中添加csrf_token
//     const csrfToken = '{{ csrf_token }}';
//     fetch('/web/ht/login/', {
//         method: 'POST',
//         body: JSON.stringify(data),
//         headers: {
//             'X-CSRFToken': csrfToken
//         }
//     }).then(res => res).then(data => {
//         console.log(data);
//     }).catch(err => {
//         console.log(err);
//     });
//     return false;
    
// });
</script>
{% endblock %}

{% block NavBar %}{% endblock %}

{% block footer %}{% include '后台管理/components/Footer.html' %}{% endblock %}
